<!-- <div class="container" style="margin-top: 150px">
  <div style="text-align:center;">
    <h2>微信小程序</h2>
  </div>
  <div style="margin: 10px 0px;width:100%;border:0.5px solid #666;"></div>
  <p>微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。</p>
  <p>全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。</p>
  <p>2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。</p>
  <p>2018年2月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个小程序，进行永久封禁处理。</p>
  <p>小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，
    现在已经有超过150万的开发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展，小程序应用数量超过了一百万，
    覆盖200多个细分的行业，日活用户达到两个亿，小程序还在许多城市实现了支持地铁、公交服务。小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。</p>
  <div style="display: flex">
    <div style="width: 5px;height: 20px;background: #4F9CEE;margin-top: 3px;"></div>
    <div style="font-size: 18px;margin-left: 5px;">发展历程</div>
  </div>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」。
  </p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
  </p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线，用户可以体验到各种各样小程序提供的服务。</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2017年12月28日，微信更新的 6.6.1
    版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」，你可以通过「小程序」找到已经玩过的小游戏。</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。</p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年1月25日，微信团队在“微信公众平台”发布公告称，“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用。同时，为提升用户使用体验，开发者可以设置小程序菜单的颜色风格，并根据业务需求，对小程序菜单外的标题栏区域进行自定义。
  </p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年3月，微信正式宣布小程序广告组件启动内测，内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力，开发者可以通过小程序来赚取广告收入。
    除了公众号文中、朋友圈广告以及公众号底部的广告位都支持小程序落地页投放广告，小程序广告位也可以直达小程序。</p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年7月13日，小程序任务栏功能升级，新增“我的小程序”板块；而小程序原有的“星标”功能升级，可以将喜欢的小程序直接添加到“我的小程序”。
  </p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年8月10日，微信宣布，小程序后台数据分析及插件功能升级，开发者可查看已添加「我的小程序」的用户数。此外，2018年8月1日至12月31日期间，小程序（含小游戏）流量主的广告收入分成比例优化上调，单日广告流水10-100万区间的部分，开发者可获得的分成由原来流水的30%上调到50%，优质小程序流量主可获得更高收益。
  </p>
  <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018年9月28日，微信“功能直达”正式开放，商家与用户的距离可以更“近”一步：用户微信搜一搜功能词，搜索页面将呈现相关服务的小程序，点击搜索结果，可直达小程序相关服务页面。
  </p>
  <div style="display: flex">
    <div style="width: 5px;height: 20px;background: #4F9CEE;margin-top: 3px;"></div>
    <div style="font-size: 18px;margin-left: 5px;">主流框架</div>
  </div>
  <p> MpVue Taro</p>
  <div class="title">WEPY</div>
  <p>
    腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征，比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发，还有很多高级的特征支持：Mixin混合、拦截器等。
  </p>
  <div class="title">MpVue</div>
  <p>美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。</p>
  <div class="title">Taro </div>
  <p>京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro
    进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative。</p>

  <div style="display: flex">
    <div style="width: 5px;height: 20px;background: #4F9CEE;margin-top: 3px;"></div>
    <div style="font-size: 18px;margin-left: 5px;">UI框架</div>
  </div>
  <div class="title">WeUI WXSS</div>
<p>WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。</p>
<div class="title">iView WeApp</div>
<p>iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。</p>
<div class="title">ZanUI WeApp</div>
<p>ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。</p>
<div class="title">MinUI、Wux WeApp、ColorUI等</div>
</div> -->
<section class="intro-section">
    <div>
        <h1 class="intro-heading">{{title}}</h1>
        <div style="display: flex;justify-content: flex-end;">
            <div style="width:40px;border:1px solid #000;margin-bottom: 5px;"></div>
        </div>
        <div style="width:100%;border:1px solid #000;margin-top: 1px;"></div>
    </div>
</section>

<section class="content-section" data-scroll *ngFor="let item of data">
    <figure class="figure"><img [src]="'../../../../assets/images/' + item.img" /></figure>
    <div class="content">
        <header class="header">
            <div class="subheading">{{item.subheading}}</div>
            <h2 class="heading">{{item.heading}}</h2>
        </header>
        <p class="paragraph">
            <span  *ngFor="let contents of item.content">{{contents}}<br/><br/></span>
        </p>
    </div>
</section>